<template>
  <div id="regulations-contrast-filter">
    <search-filter @search="search" class="search"></search-filter>
    <div class="select">
      <el-select v-model="sort" :placeholder="placeholder" @change="handleSelectChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import SearchFilter from '@/components/search-filter.vue'
import _ from 'lodash'
export default {
  components: {
    SearchFilter
  },
  filters: {},
  props: {
    placeholder: {
      type: String,
      default: '请输入内容'
    }
  },
  data () {
    return {
      searchData: {},
      options: [{
        value: 1,
        label: '按发布日期倒序'
      }, {
        value: 2,
        label: '按相关度排序'
      }],
      sort: '按相关度排序 '
    }
  },
  computed: {},
  created () {},
  mounted () {
    this.searchData.sort = (this.sort === '按发布日期倒序' ? 1 : 2)
    this.emitFilterChange()
  },
  beforeDestroy () {},
  methods: {
    search (val) {
      // if (val.input) {
      this.searchData.input = val.input
      // }
      if (val.radio) {
        this.searchData.radio = val.radio
      }
      this.emitFilterChange()
    },
    handleSelectChange (val) {
      this.searchData.sort = val
      this.emitFilterChange()
    },
    emitFilterChange: _.debounce(function () {
      this.$emit('search', this.searchData)
    }, 200)
  }
}
</script>

<style lang="scss" scoped>

#regulations-contrast-filter {
  height: 104px;
  box-sizing: border-box;
  padding: 15px;
  position: relative;
  .search{
    width: 554px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .select{
    position: absolute;
    top: 47px;
    right: 38px;
    bottom: 0;
    margin-top: -15px;
  }
}
</style>

<style lang="scss">

#regulations-contrast-filter{
  .select{
    .el-input--mini .el-input__inner {
      width: 151px;
      height: 31px;
      color: $sedondary-text-color;
    }
  }
}

</style>
